import React, { Component } from 'react';
import { connect, } from 'react-redux';
import request from '../api/request'
import { openSherd, setSherd } from '../utils/utils'
import { SET_USER, SET_GAME_INFO } from '../actions/actions'

class List extends Component {
    constructor(props) {
        super(props)
        this.state = {
            show: 0,
            list: [],
            friendList: []
        }
    }

    componentDidMount() {
        const { dispatch, user } = this.props
        setSherd(user.openid, dispatch)
        request.projectInfo({ id: 1 }).then(res => {
            dispatch({
                type: SET_GAME_INFO,
                data: res.data
            })
        })
        this.getAllList()
        this.getFriendList()
    }
    
    getAllList() {
        request.getAllList().then(res => {
            this.setState({
                list: res.data
            })
        })
    }

    getFriendList() {
        const { user } = this.props
        console.log(user, 855555)
        request.getFriendList({ openid: user.openid }).then(res => {
            this.setState({
                friendList: res.data
            })
        })
    }

    changeRules = () => {
        const { show } = this.state
        this.setState({
            show: !show
        })
    }

    renderListBox() {
        const { user } = this.props
        const { show, list, friendList } = this.state
        let lisetBox
        if (show == 0) {
            lisetBox = list
        }
        if (show == 1) {
            lisetBox = friendList
        }
        return lisetBox.map((item, index) => {
            console.log(item)
            if (item.openid == user.openid) {
                return (
                    <div className="list-box" onClick={() => this.props.history.push('/questions/integral')} >
                        <div className="list-box-hd">{index + 1}</div>
                        <div className="list-box-tx"><img className="user-tx" src={item.headimgurl} alt="" /></div>
                        <div className="list-box-name">{item.nickname}</div>
                        <div className="list-box-jf">总积分：{item.integral}分</div>
                    </ div>
                )
            }
            return (
                <div className="list-box">
                    <div className="list-box-hd">{index + 1}</div>
                    <div className="list-box-tx"><img className="user-tx" src={item.headimgurl} alt="" /></div>
                    <div className="list-box-name">{item.nickname}</div>
                    <div className="list-box-jf">总积分：{item.integral}分</div>
                </div>
            )
        })
    }

    changeShow(show) {
        this.setState({
            show
        })
    }

    renderMe() {
        const { user, gameInfo } = this.props
        const { show, list, friendList } = this.state
        let lisetBox
        let ranking
        if (show == 0) {
            lisetBox = list
        }
        if (show == 1) {
            lisetBox = friendList
        }

        lisetBox.map((item, index) => {
            if (item.openid == user.openid) {
                ranking = index + 1
            }
        })
        console.log(gameInfo)
        return (
            <div className="list-box list-box-me">
                <div className="list-box-tx" onClick={() => this.props.history.push('/questions/integral')}><img className="user-tx" src={user.headimgurl} alt="" /></div>
                <div className="list-box-name">
                    <div className="list-box-name-cell">
                        <p className="name">{user.nickname}</p>
                        <p className="pm">
                            {/* <span className="pm-warp">
                            <span className="pm1">{show == 1 ? '好友排名' : '全国排名'}</span>
                            <span className="pm2">{ranking ? ranking : '未上榜'}</span>
                        </span> */}
                            <span className="pm3">连续答题：{user.continuous}天</span>
                        </p>
                    </div>
                    {/* <p className="jf">积分高于 <span>{gameInfo.rankingIntegral}</span> 分有机会赢得豪华大奖</p> */}
                    <div className="list-box-jf"><span className="integral-name">累计积分</span><span className="integral">{user.integral}分</span></div>
                </div>
            </div>
        )
    }

    render() {
        const { dispatch, gameInfo } = this.props
        const { show } = this.state

        return (
            <div className="list">
                <img className="list-title" src={require('../static/image/list-bg.png')} alt="" />
                {this.renderMe()}
                <div className="card list-card">
                    <div className="list-nav">
                        <div onClick={() => this.changeShow(0)} className={show === 0 ? 'list-nav-box active' : 'list-nav-box'}>全国榜</div>
                        <div onClick={() => this.changeShow(1)} className={show === 1 ? 'list-nav-box active' : 'list-nav-box'}>好友榜</div>
                    </div>
                    <div className="list-content">
                        {this.renderListBox()}
                    </div>
                </div>
                <div className="home-btns">
                    <div className="go" onClick={() => this.props.history.push('/questions/')}><img src={require('../static/image/btn-goHome.png')} alt="" /></div>
                </div>
                <div className="rules-b">
                    <p>积分高于{gameInfo.rankingIntegral}分有机会赢得豪华大奖</p>
                    {/* <p>*详情请见活动规则</p> */}
                </div>
            </div>
        );
    }
}

export default connect(({ user, code, gameInfo }) => ({ user, code, gameInfo }))(List);
